<template>
  <div>
    <el-collapse value="common">
      <el-collapse-item title="小组件配置" name="common">
        <el-form :model="widget.UI.data" label-width="80px" size="mini" class="pad-lft-rgt-10">
          <el-form-item :label="variable.name" v-for="(variable,index) in customVal" :key="index">
            <el-input v-if="variable.type === 'string'" v-model="variable.value" size="mini" class="width-100"
                      placeholder="请输入变量默认值"></el-input>
            <el-input-number v-else-if="['int', 'double'].includes(variable.type)" v-model="variable.value"
                             size="mini" class="width-100"
                             placeholder="请输入变量默认值"></el-input-number>
            <el-select v-else-if="variable.type === 'bool'" v-model="variable.value" size="mini" class="width-100">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
            <el-input type="textarea" v-else-if="['list', 'map'].includes(variable.type)" v-model="variable.value"
                      size="mini" class="width-100"
                      placeholder="请输入变量默认值"></el-input>
            <el-input v-else v-model="variable.value" size="mini" placeholder="请输入变量默认值" class="width-100"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {WidgetDevice} from "@/modules/IDE/widget/atom/widgetDevice";

  export default {
    name: 'WidgetSpec',
    props: {
      widget: {
        type: WidgetDevice,
        default: () => {
          return {};
        }
      }
    },
    computed: {
      customVal() {
        return this.widget.ports.values.filter((item) => item.custom);
      }
    },
    methods: {
      forceUpdate() {
        this.$forceUpdate();
      }

    }
  };
</script>

<style scoped>
</style>
